import plugin from '../../../lib/plugins/plugin.js'
import Render from '../models/Render.js'
import { style } from '../resources/help/imgs/config.js'
import _ from 'lodash'

export class xiaoyue extends plugin {
  constructor() {
    super({
      name: "小月帮助",
      dsc: "小月帮助",
      event: "message",
      priority: 9999,
      rule: [
        {
          reg: "^#?(小月)?帮助$",
          fnc: "help"
        }
      ]
    })
  }

  async help(e) {
    const helpCfg = {
      "themeSet": false,
      "title": "小月帮助",
      "subTitle": "xiaoyue-plugin",
      "colWidth": 265,
      "theme": "all",
      "themeExclude": [
        "default"
      ],
      "colCount": 2,
      "bgBlur": true
    }
    const helpList = [
      {
        "group": "娱乐功能",
        "list": [
          {
            "icon": 1,
            "title": "#查看乐子人(.+别名)",
            "desc": "查看乐子人"
          },
          {
            "icon": 2,
            "title": "#查看乐子人.+有多少图",
            "desc": "查看乐子人有多少图"
          },
          {
            "icon": 3,
            "title": "#查看乐子(图|.+)",
            "desc": "随机乐子人"
          },
          {
            "icon": 4,
            "title": "#小月plus",
            "desc": "小月plus"
          },
          {
            "icon": 5,
            "title": "#表情包(.+)",
            "desc": "表情包图片"
          },
          {
            "icon": 5,
            "title": "#表情列表",
            "desc": "查看已收录表情"
          },
        ]
      },
      {
        "group": "插件安装器",
        "list": [
          {
            "icon": 1,
            "title": "#查询(.+)列表",
            "desc": "查询插件库列表里插件"
          },
          {
            "icon": 2,
            "title": "#查询插件",
            "desc": "查询插件库插件"
          },
          {
            "icon": 3,
            "title": "#安装插件",
            "desc": "安装插件库插件"
          },
          {
            "icon": 3,
            "title": "#卸载插件",
            "desc": "卸载插件"
          },
          {
            "icon": 4,
            "title": "#启用插件",
            "desc": "启用停用列表插件"
          },
          {
            "icon": 5,
            "title": "#停用插件",
            "desc": "停用使用中的插件"
          },
        ]
      },
      {
        "group": "主人功能",
        "list": [
          {
            "icon": 10,
            "title": "#小月(安静|说话)",
            "desc": "开关他人功能权限"
          },
          {
            "icon": 11,
            "title": "#小月(强制)更新",
            "desc": "小月更新"
          },
          {
            "icon": 12,
            "title": "#小月更新日志",
            "desc": "更新日志"
          },
          {
            "icon": 13,
            "title": "#小月设置",
            "desc": "小月设置"
          },
        ]
      },
    ]
    let helpGroup = []
    _.forEach(helpList, (group) => {
      _.forEach(group.list, (help) => {
        let icon = help.icon * 1
        if (!icon) {
          help.css = 'display:none'
        } else {
          let x = (icon - 1) % 10
          let y = (icon - x - 1) / 10
          help.css = `background-position:-${x * 50}px -${y * 50}px`
        }
      })
      helpGroup.push(group)
    })

    let themeData = await getThemeData(helpCfg, helpCfg)
    return await Render.render('help/index', {
      helpCfg,
      helpGroup,
      ...themeData,
      element: 'default'
    }, { e, scale: 1.6 })
  }
}

async function getThemeCfg() {
  let resPath = '{{_res_path}}/help/imgs'
  return {
    main: `${resPath}/main.png`,
    bg: `${resPath}/bg.jpg`,
    style: style
  }
}

function getDef() {
  for (let idx in arguments) {
    if (!_.isUndefined(arguments[idx])) {
      return arguments[idx]
    }
  }
}

async function getThemeData(diyStyle, sysStyle) {
  let helpConfig = _.extend({}, sysStyle, diyStyle)
  let colCount = Math.min(5, Math.max(parseInt(helpConfig?.colCount) || 3, 2))
  let colWidth = Math.min(500, Math.max(100, parseInt(helpConfig?.colWidth) || 265))
  let width = Math.min(2500, Math.max(800, colCount * colWidth + 30))
  let theme = await getThemeCfg()
  let themeStyle = theme.style || {}
  let ret = [`
      body{background-image:url(${theme.bg});width:${width}px;}
      .container{background-image:url(${theme.main});width:${width}px;}
      .help-table .td,.help-table .th{width:${100 / colCount}%}
      `]
  let css = function (sel, css, key, def, fn) {
    let val = getDef(themeStyle[key], diyStyle[key], sysStyle[key], def)
    if (fn) {
      val = fn(val)
    }
    ret.push(`${sel}{${css}:${val}}`)
  }
  css('.help-title,.help-group', 'color', 'fontColor', '#ceb78b')
  css('.help-title,.help-group', 'text-shadow', 'fontShadow', 'none')
  css('.help-desc', 'color', 'descColor', '#eee')
  css('.cont-box', 'background', 'contBgColor', 'rgba(43, 52, 61, 0.8)')
  css('.cont-box', 'backdrop-filter', 'contBgBlur', 3, (n) => diyStyle.bgBlur === false ? 'none' : `blur(${n}px)`)
  css('.help-group', 'background', 'headerBgColor', 'rgba(34, 41, 51, .4)')
  css('.help-table .tr:nth-child(odd)', 'background', 'rowBgColor1', 'rgba(34, 41, 51, .2)')
  css('.help-table .tr:nth-child(even)', 'background', 'rowBgColor2', 'rgba(34, 41, 51, .4)')
  return {
    style: `<style>${ret.join('\n')}</style>`,
    colCount
  }
}
